import { current } from "@reduxjs/toolkit";
import { useEffect, useState } from "react";
import "./style.css"
import { Box, Flex } from "@chakra-ui/react";
interface IProps {
    slides: string[];
}

const Carousel = ({ slides }:IProps) => {
    const [currentIndex, setCurrentIndex] = useState(0);
    const [intervalId,setIntervalId] = useState(null);

    const nextSlide = () => {
        setCurrentIndex((prevIndex) => (prevIndex + 1) % slides.length);
        
    };

    const prevSlide = () => {
        setCurrentIndex((prevIndex) => (prevIndex - 1 + slides.length) % slides.length);
    };

    useEffect(() => {
        const interval = setInterval(() => {
            nextSlide();
        }, 3000);
        return ()=> clearInterval(interval);
    }, [slides.length]);
    return (
        <>
        <div className="carousel" >
            <div className="carousel-inner">
                <div className="carousel-item">
                    <img src={slides[currentIndex]} alt="" />
                </div>
            </div>
            <div className="carousel-indicators">
                {/* <div className="carousel-indicator"> */}
                    {slides.map((_, index) => (
                        <div key={index} className={`carousel-indicator-item ${index === currentIndex ? 'active' : ''}`}>&nbsp;</div>
                    ))}
                {/* </div> */}
            </div>
            <button className="carousel-control prev" onClick={prevSlide}>❮</button>
            <button className="carousel-control next" onClick={nextSlide}>❯</button>
        </div>
        <div className="download-btn">
            <Flex className="download-btn-item">
                
             <button >下载车机版</button>

            </Flex>
            <Flex className="download-btn-item">
            <button  >下载Android版</button>

            </Flex>
            <Flex className="download-btn-item">
            <button  >下载iPhone版</button>
                
            </Flex>
            <Flex className="download-btn-item">
            <button  >下载PC版</button>
                
            </Flex>
            <Flex className="download-btn-item">
            <button  >下载其他版</button>
                
            </Flex>
        </div>
        </>

    );
};

 
export default Carousel;


